<template>
	<view class="center-container">
		<u-navbar bgColor="#1A1A1A" autoBack height="90" placeholder fixed>
		</u-navbar>
		<!-- 个人资料卡片 -->
		<view class="my-card">
			<view class="my-header">
				<u-avatar :src="src" size="56"></u-avatar>
				<view class="user-name">{{userInfo.nickname}}</view>
			</view>
			<view class="my-gz">
				<text style="margin-right: 40rpx;">关注{{followNum}}</text>
				<text>粉丝{{fanNum}}</text>
			</view>
			<view class="my-info">
				<text>{{userInfo.sex===1?'男':"女"}}</text>
				<text style="margin: 0 40rpx;">{{userInfo.birthplace}}</text>
				<text>{{userInfo.birthday}}</text>
			</view>
			<view class="my-desc">
				<view class="desc">{{userInfo.introduction}}!</view>
				<view class="my-update" @click="toUser">修改资料</view>
			</view>
		</view>
		<view class="my-data">
			<view class="data-title">运动数据</view>
			<view class="data-num">
				<view class="data-name">总运动</view>
				<view class="data-count">
					<view class="minte">
						<text style="font-size: 56rpx;font-weight: bold;">0</text>
						<text style="color: #A2A2A2;margin-left: 40rpx;">分钟</text>
					</view>
					<view class="month-data">
							<view class="">
								<text>本月运动 0 </text>
								<text style="color: #A2A2A2;">分钟</text>
							</view>
							<view class="time" style="font-size: 24rpx;color: #A2A2A2;margin-top: 20rpx;">
								2021.09.16加入
							</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {userInfo} from "@/api/my"
	export default {
		data() {
			return {
				src: "../../static/imgs/user-avtar.png",
				userId:"",
				// 粉丝
				fanNum:"",
				// 关注
				followNum:"",
				userInfo:{}
			};
		},
		onShow() {
			this.userId=uni.getStorageSync("userId")
			this.getUserData()
		},
		methods:{
			// 跳转到个人资料页面
			toUser(){
				uni.navigateTo({
					url:"/pages/my/user"
				})
			},
			// 获取个人信息
			getUserData(){
				userInfo(this.userId).then(res=>{
					this.fanNum=res.data.fanNum
					this.followNum=res.data.followNum
					this.userInfo=res.data.userInfo
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.center-container {
		height: 100%;
		overflow-y: auto;
		background-color: #1A1A1A;
		padding: 0 56rpx;

		.my-card {
			background-color: #000000;
			padding: 74rpx 62rpx 74rpx 76rpx;
			border-radius: 30rpx;
			border: 1px solid #000000;

			.my-header {
				display: flex;
				align-items: center;

				.user-name {
					margin-left: 34rpx;
					font-size: 36rpx;
				}
			}

			.my-gz {
				margin-top: 60rpx;
			}

			.my-info {
				margin-top: 40rpx;
			}

			.my-desc {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 40rpx;

				.my-update {
					width: 154rpx;
					border-radius: 23rpx;
					border: 1px solid #000000;
					background: #F04E39;
					height: 46rpx;
					line-height: 46rpx;
					text-align: center;
				}
			}
		}
		.my-data{
			margin-top: 40rpx;
			.data-title{
				color: #595959;
			}
			.data-num{
				margin-top: 40rpx;
				.data-name{
					font-size: 36rpx;
					font-weight: bold;
				}
			}
			.data-count{
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				.month-data{
					margin-left: 80rpx;
				}
			}
		}
	}
</style>
